<template>
  <div class="rankingList-age">
    <div class="rankingList-top">
      <div class="rankingList-top_item">
        <img src="../assets/login-register/cancel.png" @click="Return" class="rankingList-top_img" alt="">
      </div>
      <div class="rankingList-top_item rankingList-top_center">歌单</div>
      <div class="rankingList-top_item">
        <img src="../assets/icon/menu.png" class="rankingList-top_img2" alt="">
      </div>
    </div>

    <div class="main">

      <div class="boutique">
        <div class="boutique_nva">
          <img :src='coverImgUrl' alt="" class="boutique_img">
           <div class="boutique_text">
             <p class="text1">
               精品歌单
               <span class="text1_log">
                 <img src="../assets/icon2/songsIcon.png" alt="">
               </span>
               <span class="text1_xiayige">
                 <img src="../assets/icon/xiayige2.png" alt="">
               </span>
             </p>
             <p class="text2">{{contitName}}</p>
             <p class="text3">{{copywriter}}</p>
           </div>
        </div>
        <div class="mohu"></div>
      </div>


      <div class="whole">
        <div class="whole_left">
          <span class="whole_left_text">全部歌单</span>
          <span class="whole_left_xiayige">
            <img src="../assets/icon/xiayige2.png" alt="">
          </span>
        </div>
      <div class="whole_right">
        <ul>
          <li>华语</li>
          <li>流行</li>
          <li class="none">说唱</li>
        </ul>
      </div>

      </div>

      <div class="box_img-text"  v-for="(item, key) in songArr" :key="key">

        <div class="img-text">
          <img  :src="item.coverImgUrl"  alt="" class="img">
          <div class="text">{{item.name}}</div>
          <div class="dw-text">{{item.playCount}}</div>
          <div class="playCount">{{item.playCount}}</div>
        </div>

      </div>

    </div>

    <v-footer></v-footer>
  </div>
</template>

<script>

  import footer from "@/components/footer/"
  export default {
    name: "ranking",
    data() {
      return {
        songArr: [],
        contitName:'',
        copywriter:'',
        coverImgUrl:'',

      };
    },
    components: {
      'v-footer': footer,
    },
    methods: {
      Return(){
        this.$router.push({ name: 'Home' });
      }
    },
    created() {
      this.$http.get('http://localhost:3000/top/playlist/highquality').then((res) => {
        // console.log(res);
        this.songArr = res.data.playlists;
      });
      this.$http.get('/api/top/playlist/highquality').then((res) => {
        this.contitName = res.data.playlists[0].name;
        this.copywriter = res.data.playlists[0].copywriter;
        this.coverImgUrl = res.data.playlists[0].coverImgUrl;
      });
    },
  }
</script>

<style scoped>
  .rankingList-age{
    width: 100vw;
    margin-bottom: 100px;
    background: #FBFCFD;

  }
  .rankingList-top{
    width: 100vw;
    height: 50px;
    background: #C64B3D;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #fffdef;
    position: fixed;
    z-index: 10;

  }
  .rankingList-top_item{
    width: 33vw;
    height: 50px;
    float: left;
  }
  .rankingList-top_img{
    width: 12px;
    display: block;
    margin-top: 15px;
    margin-left: 15px;
  }
  .rankingList-top_img2{
    width: 18px;
    display: block;
    margin-top: 18px;
    margin-left: 90px;
  }

  .main{
    width: 100vw;
    position: absolute;
    top: 50px;
    left: 0;
    margin-bottom: 50px;
  }
  .boutique{
    width: 100vw;
    height: 150px;
    position: relative;
    overflow: hidden;

  }
  .mohu{
    width: 100vw;
    height: 200px;
    background:url("../assets/icon/gedan-img.jpg");
    filter: blur(10px);
    z-index:-1;
    position: absolute;
    top: -20px;
    left: 0;
  }
  .boutique_nva{
    width: 100vw;
    height: 90px;
    position: absolute;
    top: 45px;
  }
  .boutique_img{
    width: 90px;
    height: 90px;
    display: block;
    border-radius: 5px;
    float: left;
    margin-left: 5px;
  }
  .boutique_text{
    width: 270px;
    height: 90px;
    float: right;
  }
  .text1{
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 16px;
    text-indent: 30px;
  }
  .text2{
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 14px;
  }
  .text3{
    height: 20px;
    line-height: 20px;
    color: #a29992;
    font-size: 12px;
  }
  .text1_log{
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 8px;
  }
  .text1_log img{
    display: block;
    width: 24px;
  }
  .text1_xiayige{
    display: block;
    width: 18px;
    height: 20px;
    position: absolute;
    top: 10px;
    left: 200px;
  }
  .text1_xiayige img{
    display: block;
    width: 10px;
    margin-top: 1px;
    margin-left: 5px;
  }
  .whole{
     width: 100vw;
    height: 80px;
   }
  .whole_left{
    width: 50%;
    height: inherit;
    float: left;
    position: relative;

  }
  .whole_left_text{
    display: block;
    width: 120px;
    height: 30px;
    border: 1px solid #e8e8e9;
    color: #3a3a3b;
    border-radius: 45px;
    font-size: 16px;
    line-height: 30px;
    text-indent: 15px;
    margin-top: 25px;
    margin-left: 8px;
  }
  .whole_left_xiayige{
    display: block;
    width: 15px;
    height: 18px;
    position: absolute;
    top: 33px;
    left: 100px;
  }
  .whole_left_xiayige img{
    display: block;
    width: 10px;
  }

  .whole_right{
      width: 50%;
      height: inherit;
    float: left;
    }
  .whole_right ul{
    width: 130px;
    height: 16px;
    margin-top: 35px;
    margin-left: 59px;
  }
  .whole_right ul li{
    float: left;
    width: 32%;
    height: inherit;
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    color: #808081;
    border-right: 1px solid #ccc;
  }
  .whole_right ul .none{
    border: none;
  }

  .box_img-text{
    width: 100vw;
    position: relative;
  }
  .img-text{
    width: 180px;
    height: 230px;
    margin-left: 5px;
    float: left;
    position: relative;
  }
  .img-text .img{
    width: 180px;
    height: 180px;
    display: block;
    border-radius: 5px;
  }
  .img-text .text{
    width: 180px;
    height: 50px;
    line-height: 22px;
    font-size: 13px;
    text-indent: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .img-text .dw-text{
    width: 150px;
    height: 20px;
    font-size: 10px;
    color: #dcdcdc;
    text-indent: 25px;
    position: absolute;
    bottom: 50px;
    left: 0;
    background: url("../assets/icon/admin.png") no-repeat 10px 0px;
    background-size: 12px;

  }
  .playCount{
    width: 60px;
    height: 16px;
    background: #55a532;
    position: absolute;
    top: 2px;
    color: #fff;
    text-indent: 18px;
    right: 5px;
    font-size: 10px;
    background: url("../assets/icon/headset.png") no-repeat 4px 0px;
    background-size: 11px;
  }


</style>
